
var chartDom = document.getElementById('yibiao1');
var myChart = echarts.init(chartDom, 'dark');
var option;

var option;

option = {
     baseOption: {
         graphic: [
         {
           type:"image",
           left:"4%",
           bottom:"8%",
           style: {
               image:"https://i.loli.net/2021/06/20/PlYriL6m1DwkO2I.png",
               width:"50",
               height:"50",
            }
         },
          {
           type:"image",
           left:"5%",
           bottom:"82%",
           style: {
               image:"https://i.loli.net/2021/06/21/CvlGW8PErboK2YQ.png",
               width:"68",
               height:"45",
            }
         },
         ],
                timeline: {
                    //loop: false,        
                    axisType: 'category',
                    show: true,
                    autoPlay: true,
                    playInterval: 2000,
                    data: ['2017年', '2018年', '2019年','2020年'],
                    bottom:50,
                    left:"20%",
                    right:"22%",
                    progress:{
                        label:{
                            fontSize: 14,
                        },
                        itemStyle: {
                            color: "rgba(242,146,104)"
                        },
                        lineStyle: {
                        color: "rgba(242,146,104)"
                        },
                    },
                    lineStyle: {
                        show: true,
                        shadowBlur: 1,
                        width: 4},
                    label: {//轴的文本标签；
                        normal: {
                            textStyle: {
                                color: '#fff',
                                fontWeight: "bold",
                                fontSize: 14,
                                    }
                                },
                        emphasis: {//文本高亮的样式：如鼠标悬浮的时候；
                            textStyle: {
                                color: '#fff',
                                fontWeight: "bold",
                                fontSize: 14,
                                }
                            }
                        },
                    checkpointStyle: {
                            color: '#bbb',
                            borderColor: '#777',
                            borderWidth:8
                             },
                    
                },
                tooltip: {
                    show:"true",
                    trigger:"item",
                },
                title:[
                {
                    text: '全国范围内，各项污染物排放均达标的焚烧炉，占比逐年上升' ,
                    left:'21%',
                    top: '8%',
                    textStyle: {
                       fontSize:20,
                       color:"#FFFFFF",
                       fontFamily: "Microsoft YaHei",
                          },
                },
                {   subtext:"2017年",
                    itemGap: 25,
                    left:'35%',
                    top: '68%',
                    subtextStyle: {
                             fontFamily: "Microsoft YaHei",
                             fontWeight: "bold",
                             fontSize: 25,
                             color:"rgba(242,146,104)",
                             width: '60%',
                             lineHeight: 40,
                             height: 15,
                    }
                },],
               backgroundColor:'rgb(0,21,46)',
    series: [{
            type: 'gauge',
            center: ["50%", "60%"],
            startAngle:200,
            endAngle: -20,
            min: 0,
            max:100,
            splitNumber: 10,
            itemStyle: {
                color: 'rgba(242,146,104)'
            },
            progress: {
                show: true,
                width: 30
            },
            pointer: {
                show: false,
            },
            radius:"61%",
            axisLine: {
                lineStyle: {
                    width: 30
                }
            },
            axisTick: {
                distance: -45,
                splitNumber: 5,
                lineStyle: {
                    width: 2,
                    color: '#999'
                }
            },
            splitLine: {
                distance: -70,
                length: 14,
                lineStyle: {
                    width: 3,
                    color: '#999'
                }
            },
            axisLabel: {
                distance: -10,
                fontSize: 16
            },
            anchor: {
                show: false
            },
            detail: {
                valueAnimation: true,
                width: '60%',
                lineHeight: 40,
                height: 15,
                borderRadius: 8,
                offsetCenter: [0, '-10%'],
                fontSize: 30,
                fontWeight: 'bolder',
                formatter: '{value} %',
                color: 'auto'
            },

        },
            {
            type: 'gauge',
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            radius:"61%",
            itemStyle: {
                color: '#FD7347',
            },
            progress: {
                show: true,
                width: 8
            },

            pointer: {
                show: false
            },
            axisLine: {
                show: true
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            },


        }
    ],},
   
   options:[{
        title: [{
            text: '全国范围内，各项污染物排\n放均达标的焚烧炉，占比\n逐年上升',
            },
              { subtext:"2017年"},
            ],
            series: [
             {
            type: 'gauge',
            data: [8.1]
            },
            {
            type: 'gauge',
            data: [8.1]
            },
            ]
        },
        {
        title: [{
            text: '全国范围内，各项污染物排\n放均达标的焚烧炉，占比\n逐年上升',
            },
              { subtext:"2018年"},
            ],
            series: [
             {
            type: 'gauge',
            data: [13.31]
            },
            {
            type: 'gauge',
            data: [13.31]
            },
            ]
        },
          {
             title: [{
            text: '全国范围内，各项污染物排\n放均达标的焚烧炉，占比\n逐年上升',
            },
              { subtext:"2019年"},
            ],
            series: [
             {
            type: 'gauge',
            data: [55.26]
            },
            {
            type: 'gauge',
            data: [55.26]
            },
            ]
        },
        {
             title: [{
            text: '全国范围内，各项污染物排\n放均达标的焚烧炉，占比\n逐年上升',
            },
              { subtext:"2020年"},
            ],
            series: [
             {
            type: 'gauge',
            data: [71.48]
            },
            {
            type: 'gauge',
            data: [71.48]
            },
            ]
        },
],
        media: [
            {
                option: {
                    title:{                         
                    },
                }
            },
            {
                query: {
                    maxWidth: 500
                },
                option: {
                    timeline:{
                        left:"6%",
                        right:"6%"
                    },  
                },
            }
        ]
};

option && myChart.setOption(option);